
<div class="container">
	<div class="row">
		<h2>BootStrap Table插件</h2>
		<h4>搜索,排序,展开列详细,多选,前端分页,控制列显示,与Modal结合,列编辑,下载数据</h4>
	</div>
	<div class="row">
		<div id="toolbar">
			<button id="remove" class="btn btn-danger">
				<i class="glyphicon glyphicon-remove"></i> 删除
			</button>
			<button id="add" class="btn btn-success">
				<i class="glyphicon glyphicon-plus"></i> 添加或更新
			</button>
		</div>
		<table id="table" 			
           data-toolbar="#toolbar"
           data-search="true"           
           data-show-toggle="true"
           data-show-columns="true"
           data-show-export="true"
           data-detail-view="true"
           data-detail-formatter="detailFormatter"
           data-minimum-count-columns="2"
           data-show-pagination-switch="true"
           data-pagination="true"		   
           data-id-field="systemid"
		   data-page-size="30"
           data-page-list="[30, 80, 120, 200, ALL]"
		   data-filter-control="true"
           data-side-pagination="client">
		   <!-- data-visible="false" -->
		</table>
	</div>	
</div>

<div id="addModal" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
  <div class="modal-dialog modal-lg">
	<div class="modal-content">
	  <div class="modal-header">
		<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
		<h4 class="modal-title" id="comfirmLabel">提示</h4>
	  </div>
	  <div class="modal-body">
		<form>
		  <div class="form-group">
			<label for="exampleInputEmail1">Email address</label>
			<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
		  </div>
		  <div class="form-group">
			<label for="exampleInputPassword1">Password</label>
			<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
		  </div>
		  <div class="form-group">
			<label>下拉选择：</label>
			<select class="form-control">
				<option>111</option>
				<option>222</option>
				<option>333</option>
			</select>			
		  </div>	
		  <div class="form-group">
			<label for="exampleInputFile">File input</label>
			<input type="file" id="exampleInputFile">
			<p class="help-block">Example block-level help text here.</p>
		  </div>
		  <div class="checkbox">
			<label>
			  <input type="checkbox"> Check me out
			</label>
		  </div>
		</form>
	  </div>
	  <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
        <button type="button" class="btn btn-primary">确认添加</button>
      </div>
	</div>	
  </div>
</div>

<div id="confirmTip" class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
  <div class="modal-dialog modal-sm" role="document">
	<div class="modal-content">
	  <div class="modal-header">
		<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
		<h4 class="modal-title" id="comfirmLabel">提示</h4>
	  </div>
	  <div class="modal-body">
		<h3>确认删除？</h3>
	  </div>
	  <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
        <button type="button" class="btn btn-primary">确定</button>		
      </div>
	</div>
  </div> 
</div>
